---
import ToolButton from "./ToolButton.astro";
---
<ToolButton
    id="theme-toggle"
    tooltipText="切换主题"
    tooltipPlacement="left">
 <svg
        id="theme-toggle-dark-icon"
        class="w-8 h-8"
        fill="currentColor"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
        ><path
            d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
        ></path>
    </svg>
    <svg
        id="theme-toggle-light-icon"
        class="hidden w-8 h-8"
        fill="currentColor"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
        ><path
            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
            fill-rule="evenodd"
            clip-rule="evenodd"></path>
    </svg>
</ToolButton>

<script>
    // 优化后的主题切换逻辑
    const setupThemeToggle = () => {
        const darkIcon = document.getElementById("theme-toggle-dark-icon");
        const lightIcon = document.getElementById("theme-toggle-light-icon");
        const toggleBtn = document.getElementById("theme-toggle");

        if (!darkIcon || !lightIcon || !toggleBtn) return;

        // 优先获取localStorage中的主题设置，如果没有则检查系统偏好
        const getInitialTheme = () => {
            const savedTheme = localStorage.getItem("color-theme");
            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
            
            return savedTheme || (prefersDark ? "dark" : "light");
        };

        // 初始化主题
        const initialTheme = getInitialTheme();
        if (initialTheme === "dark") {
            document.documentElement.classList.add("dark");
        }

        // 同步图标状态
        const isDark = document.documentElement.classList.contains("dark");
        darkIcon.classList.toggle("hidden", !isDark);
        lightIcon.classList.toggle("hidden", isDark);

        // 点击切换 - 使用passive选项提高性能
        toggleBtn.addEventListener("click", () => {
            const isDark = document.documentElement.classList.toggle("dark");
            localStorage.setItem("color-theme", isDark ? "dark" : "light");
            darkIcon.classList.toggle("hidden");
            lightIcon.classList.toggle("hidden");
        }, { passive: false });

        // 监听系统主题偏好变化
        const handleSystemThemeChange = (e) => {
            const savedTheme = localStorage.getItem("color-theme");
            // 只有当用户没有明确设置主题时，才响应系统主题变化
            if (!savedTheme) {
                const prefersDark = e.matches;
                if (prefersDark) {
                    document.documentElement.classList.add("dark");
                } else {
                    document.documentElement.classList.remove("dark");
                }
                
                const isDark = document.documentElement.classList.contains("dark");
                darkIcon.classList.toggle("hidden", !isDark);
                lightIcon.classList.toggle("hidden", isDark);
            }
        };

        // 添加系统主题变化监听器
        window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", handleSystemThemeChange);
    };

    // 确保DOM加载后执行
    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", setupThemeToggle);
    } else {
        setupThemeToggle();
    }
</script>
